<template>
	<view class="page">
		<view class="coupon-cont">
			<view class="coupon-cont-list">
				<block v-if="loadData.pageType=='give'">
					<view class="coupon-cont-list-item" v-for="(item,index) in rewardList" :key="index">
						<view class="coupon-cont-list-item-no">NO: {{item.coupon_no}}</view>
						<view class="coupon-cont-list-item-info flex">
							<view class="coupon-cont-list-item-info-left">
								<view class="coupon-cont-list-item-info-money">赠送好友ID:{{item.to_uid}}</view>
								<view class="coupon-cont-list-item-info-time">赠送时间:{{item.create_time}}</view>
							</view>
							<view class="coupon-cont-list-item-info-num">￥<text>{{item.amount}}</text></view>
						</view>
					</view>
				</block>
				<block v-if="loadData.pageType=='recharge'">
					<view class="coupon-cont-list-item" v-for="(item,index) in rewardList" :key="index">
						<view class="coupon-cont-list-item-no flex">NO: {{item.order_no}}<text class="coupon-cont-list-item-no-status">{{item.pay_status_text}}</text></view>
						<view class="coupon-cont-list-item-info flex">
							<view class="coupon-cont-list-item-info-left">
								<view class="coupon-cont-list-item-info-money">{{item.pay_way_text}}</view>
								<view class="coupon-cont-list-item-info-time">充值时间:{{item.pay_time_text}}</view>
							</view>
							<view class="coupon-cont-list-item-info-num">￥<text>{{item.pay_amount}}</text></view>
						</view>
					</view>
				</block>
				<block v-if="loadData.pageType=='limit'">
					<view class="m-log-list" v-for="(item, index) in rewardList" :key="index">
					    <view class="m-log-line" :class="[item.way_text=='收入' ? 'red' : 'gray']"></view>
					    <view @tap="showDeital(item.id)" class="m-log-info">
					        <view class="m-log-info-l">
					            <view class="u-log-title">{{item.type_text}}({{item.is_accept_text}})</view>
					            <view class="u-log-date">{{item.create_time}}</view>
					        </view>
					        <view class="m-log-info-r">
								<view class="money" :class="[item.way_text=='收入' ? 'f-log-plus' : 'f-log-minus']">{{item.way_text=='收入' ? '+'+item.money : '-'+item.money}}</view>
								<view class="havemoney">余额:{{item.havemoney}}</view>
							</view>
					    </view>
					</view>
				</block>
				<mix-load-more :status="loadMoreStatus"></mix-load-more>
			</view>
		</view>
	</view>
</template>
<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				showLoading: false,
				rewardList:[],
				couponNum:0,
				coupon_no:'',
				member_id:'',
				page:1,
				total_pages:1,
				loadMoreStatus:0,
				loadData:{}
			};
		},
        methods: {
			getData(type){
				let that = this
				let url = ''
				switch(that.loadData.pageType){
					case 'give':
						url = 'maker/give_log'
					break;
					case 'recharge':
						url = 'Maker/coupon_recharge_log'
					break;
					case 'limit':
						url = 'Maker/account_log'
					break;
				}
				that.loadMoreStatus = 1
				if(that.page <= that.total_pages){
					jewel.get(url,{page:that.page},true,function(res){
						if(res.data.data.length === 0) that.loadMoreStatus = 2
						if(type == 'more'){
							that.rewardList = that.rewardList.concat(res.data.data)
						}else{
							that.rewardList = res.data.data
							that.total_pages = res.data.total_pages
							that.loadMoreStatus = that.total_pages == 1||that.total_pages == 0?2:0
						}
					});
				}else{
					that.loadMoreStatus = 2
				}
			}
        },
        onLoad(loadData) {
			let title = ''
			this.loadData = loadData
			switch(loadData.pageType){
				case 'give':
					title = '赠送记录'
				break;
				case 'recharge':
					title = '充值记录'
				break;
				case 'limit':
					title = '额度明细'
				break;
			}
			uni.setNavigationBarTitle({
				title: title
			})
			this.getData()
        },
		onReachBottom() {
			this.page++
			this.getData('more')
		}
	}
</script>
<style lang="scss">
	.flex{
		display: flex;
	}
	.page{
		background-color: #f4f4f4;
		.coupon-cont{
			&-list{
				&-item{
					height: 194rpx;
					margin: 0 auto;
					background-color: #FFFFFF;
					border-radius: 5px;
					box-shadow:0px 0px 29rpx rgba(214,214,214,0.24);
					overflow: hidden;
					margin-top: 20rpx;
					padding: 0 20rpx;
					&-no{
						color: #999999;
						font-size: 28rpx;
						border-bottom: 1px solid #e6e6e6;
						line-height: 66rpx;
						padding-top: 6rpx;
						justify-content: space-between;
						&-status{
							color: #d71511;
						}
					}
					&-red{
						color: #d71511;
						font-size: 26rpx;
						margin: 0 30rpx 0 18rpx;
					}
					&-info{
						justify-content: space-between;
						align-items: center;
						height: 124rpx;
						color: #4c4c4c;
						font-size: 30rpx;
						&-num{
							color: #d71511;
							font-size: 34rpx;
							margin-right: 24rpx;
							text{
								font-size: 46rpx;
							}
						}
					}
				}
			}
			&-give{
				margin-top: 70rpx;
				&-title{
					align-items: center;
					color: #000000;
					font-size: 36rpx;
					padding-left: 43rpx;
					&-icon{
						width: 41rpx;
						height: 34rpx;
						margin-right: 15rpx;
					}
				}
				&-item{
					color: #000000;
					&-name{
						font-size: 34rpx;
					}
					&-first{
						border-bottom: 1px solid #eaeaea;
						height: 82rpx;
						align-items: center;
						width: 700rpx;
						margin: 0 auto;
						padding-left: 20rpx;
						box-sizing: border-box;
					}
					&-idinput{
						margin-left: 28rpx;
					}
					&-second{
						margin-left: 42rpx;
						.name{
							line-height: 96rpx;
						}
					}
					&-noinput{
						background-color: #eaeaea;
						border-radius: 5px;
						width: 614rpx;
						padding: 15rpx 25rpx;
						font-size: 26rpx;
					}
				}
			}
		}
	}
	.red {
	    background: #ff413e;
	}
	.gray {
	    background: #4b4b4b;
	}
	.m-log-list {
	    width: 100%;
		position: relative;
		padding-top: 20upx;
	}
	
	.m-log-line {
		position: absolute;
		top: 26upx;
	    width: 6upx;
	    height: 37upx;
	    margin-left: 22upx;
	}
	
	.m-log-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	    width: 92%;
		margin-left: 40upx;
		padding-bottom: 20upx;
	    border-bottom: 1px solid #e5e5e5;
	}
	
	.u-log-title {
	    font-size: 32upx;
	}
	
	.u-log-date {
	    font-size: 24upx;
	    color: #aaa;
	}
	
	.m-log-info-r .money{
	    font-size: 32upx;
	    font-weight: bold;
		text-align: right;
	}
	
	.m-log-info-r .havemoney{
	    font-size: 24upx;
		text-align: right;
	}
</style>
